<template>
  <el-card>
    <div slot="header">
      <h3>主供及到货周期管理详情</h3>
    </div>
    <div>
      <!-- 发起原因输入框 -->
      <LaunchReasonInput
        :reason.sync="launchReason"
        :isDisabled="true"
      />
      <el-row>
        <skus-table
          :loading="tableInfo.loading"
          :columns="tableInfo.columns"
          :dataSource="tableInfo.list"
        />
      </el-row>
      <FooterFields :footerFields="footerFields" />
    </div>
  </el-card>
</template>
<script>
import { ApiRequest } from '@api/basePage';
import SkusTable from '@/components/skusTable';
import FooterFields from '@/pages/commodity/components/FooterFields';
import LaunchReasonInput from '@/components/LaunchReasonInput';

export default {
  components: {
    FooterFields,
    SkusTable,
    LaunchReasonInput
  },
  data () {
    return {
      launchReason: '', // 发起原因
      tableInfo: {
        columns: [
          {
            title: '城市',
            key: 'saleCityName',
            width: 80,
            fixed: 'left'
          },
          {
            title: 'SPU编码',
            key: 'spuNo',
          },
          {
            title: 'SKU编码',
            key: 'skuNo',
          },
          {
            title: '商品名称',
            key: 'productName',
          },
          {
            title: '商品管理区域',
            key: 'manageArea',
          },
          {
            title: '供应商代码',
            key: 'supplyNo',
          },
          {
            title: '供应商名称',
            key: 'supplyName',
          },
          {
            title: '供应商主管品类',
            key: 'supplyCategoryName',
          },
          {
            title: '供应商管理区域',
            key: 'supplyManagerArea',
          },
          {
            title: '是否供货',
            align: 'center',
            key: 'supplyState', // 1是  2否
          },
          {
            title: '是否主供',
            align: 'center',
            children: [
              {
                title: '原值',
                align: 'center',
                key: 'isMainSupplyOld',
              },
              {
                title: '现值',
                align: 'center',
                key: 'isMainSupply',
              },
            ]
          },
        ],
        list: [],
        loading: false,
      },
      footerFields: {}
    };
  },
  mounted () {
    this.handleGetTableData();
  },
  methods: {
    handleGetTableData () {
      let data = {
        recordNo: this.$route.query.recordNo
      };
      this.tableInfo.loading = true;
      ApiRequest(
        '/sysback/product/update/record/getSupplyAreaInfoRecord',
        'get',
        data,
        true
      ).then(res => {
        this.tableInfo.loading = false;
        if (res.retStatus !== '1' || !res.retData) { return false }
        this.tableInfo.list = res.retData.supplyAreaDTOS && res.retData.supplyAreaDTOS.reduce((value, item) => {
          value.push({
            saleCityName: item.saleCityName,
            spuNo: item.spuNo,
            skuNo: item.skuNo,
            productName: item.productName,
            saleAreaName: item.saleAreaName,
            supplyNo: item.supplyInfoDTO ? item.supplyInfoDTO.supplyNo : '',
            supplyName: item.supplyInfoDTO ? item.supplyInfoDTO.supplyName : '',
            supplyCategoryName: item.supplyInfoDTO
              ? item.supplyInfoDTO.supplyCategoryName
              : '',
            supplyManagerArea: item.supplyInfoDTO
              ? item.supplyInfoDTO.supplyManagerArea
              : '',
            supplyState: item.supplyState == 1 ? '是' : '否',
            isMainSupply: item.isMainSupply == 1 ? '是' : '否',
            isMainSupplyOld: item.isMainSupplyOld == 1 ? '是' : '否',
            manageArea:
              (item.supplyProductInfo && item.supplyProductInfo.manageArea) ||
              ''
          });
          return value;
        }, []);
        this.footerFields = res.retData;
        this.launchReason = res.retData?.launchReason; // 设置发起原因回显
      }).catch(() => {
        this.tableInfo.loading = false;
      })
    },
  }
};
</script>
<style lang="less" scoped>
.item_wrap {
  margin: 10px 0px;
}
</style>
